<script setup>
import {reactive, ref, watch} from "vue";
import {onMounted} from "vue";
import {info} from "../../../apis/role";
import {infoSearch} from "../../../apis/role";
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue';
import {del} from "../../../apis/role";
import PlusForm from  "../../manager/role/PlusForm.vue"
import {provide} from "vue";
import {ElMessageBox} from "element-plus";

const tableData =ref([

])



//表单搜索条件
const search=reactive({
  username:'',

})
const searchChange = async () => {
  if (search.username.trim()) {
    tableData.value = await infoSearch({ username: search.username }).then(res => res.data);
  } else {
    // 如果搜索关键词为空，则重新加载所有数据
    tableData.value = (await info()).data;
  }
};


const deletRow = (scope)=>{
  ElMessageBox.confirm('删除数据口无法恢复，您确认删除吗？','确认删除',{type:"warning"}).then( res =>{
    // console.log(scope.row.userId,scope.row.roleId)
    del(scope.row.userId,scope.row.roleId).then(async result => {
      tableData.value = (await info()).data;
    })
  }).catch(() => {

  })
  // console.log(scope.row.userId,scope.row.roleId)
  // del(scope.row.userId,scope.row.roleId).then(async result => {
  //   tableData.value = (await info()).data;
  // })
}



const plusFormVisible = ref(false)
provide('dialogVisible',plusFormVisible)

const plusFormData=ref({})

const plusSuccess = ref(false)
provide('isSuccess',plusSuccess)


const plusRow =  () => {
  plusFormData.value = {}
  plusFormVisible.value = true
  plusSuccess.value = false

}

onMounted( async () => {
  // info()
  tableData.value = (await info()).data

})

watch(plusSuccess,async () => {
  tableData.value = (await info()).data
})

</script>

<template>

<!--  <el-form inline>-->
<!--    <el-form-item label="用户名称"  >-->
<!--      <el-input  placeholder="请输入搜索的用户名" clearable size="large" v-model="search.username" @change="searchChange"/>-->
<!--    </el-form-item>-->
<!--  </el-form>-->
<!--  v-model="search.username"  @change="searchChange"-->
  <el-button size="large" style="margin-bottom: 10px" type="primary" :icon="Plus" @click="plusRow">新增数据</el-button>

  <el-table
      :data="tableData"
      size="large"
  >

    <el-table-column size="large"  prop="userId" label="用户ID"/>
    <el-table-column size="large"  prop="roleId" label="角色ID"/>
    <el-table-column size="large" prop="username" label="用户名称"/>
    <el-table-column size="large" prop="roleName" label="用户角色"/>
    <el-table-column align="center">
      <template #header #title>
        删除用户角色
      </template>
      <template #default="scope">
        <el-button type="primary" :icon="Delete" style="background-color:  #fab6b6; border: 0" @click="deletRow(scope)"/>
      </template>
    </el-table-column>

  </el-table>

  <PlusForm :form-data="plusFormData" />
</template>


<style scoped>

</style>